<template>
  <div>
    <detailBanner 
      :sightName="sightName" :bannerImg="bannerImg" :gallaryImgs="gallaryImgs">
    </detailBanner>
    <detailHeader></detailHeader>
    <div class="content">
      <detailList :categoryList="categoryList"></detailList>
    </div>
  </div>
</template>

<script>
//导入detailBanner组件
import detailBanner from './components/Banner.vue'
//导入detailHeader组件
import detailHeader from './components/Header.vue'
//导入detailList组件
import detailList from './components/list.vue'
//导入axios
import axios from 'axios'

export default {
  name:'Detail',
  data(){
    return{
      sightName:'',
      bannerImg:'',
      gallaryImgs:[],
      categoryList:[]
    }
  },
  components:{
    detailBanner,
    detailHeader,
    detailList
  },
  methods:{
    getDetailInfo(){//获取详情页面的数据
      axios.get('/api/detail.json',{//传递路由id的第二种方式：params对象
        params:{
          id:this.$route.params.id
        }
      }).then(this.handleGetDataSucc)
    },
    handleGetDataSucc(res){
      if (res.data.ret&&res.data.data) {
        this.sightName=res.data.data.sightName
        this.bannerImg=res.data.data.bannerImg
        this.gallaryImgs=res.data.data.gallaryImgs
        this.categoryList=res.data.data.categoryList
      }
    }
  },
  mounted(){
    this.getDetailInfo()
  }
  
}
</script>

<style lang="stylus" scoped>
  .content
    height:50rem;
</style>
